<template>
  <div class='survey-end-wrapper'
      :class='{
        useBgImg: endPageSetting.bgType === 1,
        useBgColor: endPageSetting.bgType === 2
      }'
      :style='{
        backgroundImage: `url(${endPageSetting.bgImg})`,
        backgroundColor: endPageSetting.bgColor
      }'>
    <div class='end-text'
        v-html='survey.closeText'
        :style='{
          color: endPageSetting.titleFontColor
        }'>
    </div>
    <!-- 返回按钮 -->
    <div class='end-btn'
         v-show='!unionType'
         :style='{
           backgroundColor: backBtnBgColor,
           color: backBtnTextColor
         }'
         @click='backToList'>
      返回列表
    </div>
    <!-- 返回应用 -->
    <div class='end-btn'
         v-show='unionType'
         :style='{
           backgroundColor: backBtnBgColor,
           color: backBtnTextColor
         }'
         @click='backToApp'>
      返回
    </div>
  </div>
</template>

<script>
export default {
  name: 'surveyNewEnd',
  data () {
    return {
      surveyId: '',
      survey: {
        surveyId: '1',
        title: '', // 问卷标题
        richTextTitle: '', // 展示的问卷标题
        accessText: '', // 问卷开始语
        closeText: '', // 问卷正常结束语
        advanceText: '', // 问卷提前结束语
        pagingMode: false // 为true时，一页展示一题
      },
      setting: {
        coverSetting: '',
        endPageSetting: '',
        headerSetting: '',
        bgSetting: '',
        buttonSetting: '',
        displaySetting: ''
      },
      // 封底设置
      endPageSetting: {
        bgType: 1, // 1 为封底背景使用图片  2 为底面背景使用颜色
        bgImg: '', // 封底背景图
        bgColor: '', // 封底背景色
        titleFontColor: '#000000' // 标题颜色
      },
      backBtnBgColor: '',
      backBtnTextColor: '',
      unionType: this.$route.query.unionType
    }
  },
  methods: {
    backToList () {
      this.$router.push({ name: 'surveyNewList' })
    },
    backToApp () {
      history.go(-1)
    },
    // 获取问卷基本信息
    getSurveyDetail () {
      let url = `${this.SERVICE_UPGRADE_SURVEY}/${this.surveyId}`
      this.$get(url).then(res => {
        if (res.code === 200) {
          if (res.data) {
            this.survey = res.data
          }
        } else {
          this.$toast(res.message)
        }
        // console.log('survey: ', this.survey)
      })
    },
    getSetting () {
      let url = `${this.SERVICE_UPGRADE_SURVEY}/setting/${this.surveyId}`
      this.$get(url).then(res => {
        if (res.code === 200) {
          if (res.data) {
            // console.log('res: ', res.data)
            let data = res.data
            for (let key of Object.keys(this.setting)) {
              if (data[key]) {
                this[key] = data[key]
              }
            }
            console.log('endPageSetting: ', this.endPageSetting)
            // 如果背景设置使用的是颜色
            if (this.endPageSetting.bgType === 2 && this.endPageSetting.bgColor) {
              this.backBtnBgColor = '#fff'
              this.backBtnTextColor = this.endPageSetting.bgColor || '#4c84ff'
            // 如果背景设置使用的是图片
            } else if (this.endPageSetting.bgType === 1 && this.endPageSetting.bgImg) {
              this.backBtnBgColor = '#fff'
              this.backBtnTextColor = '#4c84ff'
            // 如果没有设置背景，展示默认按钮样式
            } else {
              this.backBtnBgColor = '#4c84ff'
              this.backBtnTextColor = '#fff'
            }
          } else {
            // 如果没有设置背景，展示默认按钮样式
            this.backBtnBgColor = '#4c84ff'
            this.backBtnTextColor = '#fff'
          }
        } else {
          this.$toast(res.message)
        }
      })
    },
    init () {
      this.getSurveyDetail()
      this.getSetting()
      // 线下
      // this.survey.closeText = '<p style="text-align:center">您的问卷已完成作答，感谢您的参与！</p>'
      // this.endPageSetting = {
      //   bgType: 2, // 1 为封底背景使用图片  2 为底面背景使用颜色
      //   // bgImg: 'https://static.wenjuan.pub/3499149036.jpg', // 封底背景图
      //   bgColor: '#ffbe3a', // 封底背景色
      //   titleFontColor: '#ffffff' // 标题颜色
      // }
    }
  },
  created () {
    this.surveyId = this.$route.params.surveyId
    this.init()
  }
}
</script>

<style lang='stylus' scoped>
.survey-end-wrapper
  position relative
  min-height 100vh
  width 100vw
  padded_box(border-box, 15px 15px 90px)
  &.useBgImg
    bgCover()
    background-color #fff !important
  &.useBgColor
    background-image none !important
  .end-text
    font-size 14px
    line-height 1.5
    >>> img, >>> iframe, >>> video
      max-width 100% !important
  .end-btn
    position absolute
    left 15px
    right 15px
    bottom 30px
    height 40px
    line-height 40px
    text-align center
    font-size 14px
    border-radius 6px
    letter-spacing 1px
</style>
